import React, { Component, ComponentClass } from 'react';
import Taro from '@tarojs/taro';
import {View, Text, Image} from '@tarojs/components';
import {connect} from 'react-redux';
import {DateType} from '../../reducers/select-date';
import {http} from '../../utils/http';
import {
  CONTENT_QR2
} from '../../constants/api';
import {user} from '../../utils/user.service';
import "./index.scss";

type PageStateProps = {
  selectDate: DateType
}

type PageDispatchProps = {}

type PageOwnProps = {}

type PageState = {
  qrImg: any
  describe: any
}

type IProps = PageStateProps & PageDispatchProps & PageOwnProps

interface CustomerQRjustShow {
  props: IProps
}

@connect(({selectDate}) => ({
  selectDate,
}), () => ({}))

class CustomerQRjustShow extends Component {
  config = {
    navigationBarTitleText: "活码展示"
  }
  state: PageState = {
    qrImg: '',
    describe: ''
  }

  async componentDidShow() {
    const loginStatus = await user.checkLogin();
    !loginStatus && (await user.jumpLogin());
    const userData = await user.getUserData();
    const user_type = userData.isSeller ? 2 : 1;

    if (loginStatus) {
      Taro.showLoading({title: ""})
      // 根据用户身份(用户/分销商)查询对应的客服码
      const res = await http.HGet(CONTENT_QR2, {user_type});
      const {code, code_describe} = res.data;
      this.setState({qrImg: code, describe: code_describe || "联系客服"}, () => {
        Taro.hideLoading()
      })
    }
  }

  render() {
    const {qrImg, describe} = this.state;

    return (
      <View className='customer-qr-justshow'>
        <View className='qr-block header'>{describe}</View>
        <View className='qr-block content'>
          <Image
            style='width: 240px;height: 240px;'
            src={qrImg}
            mode='aspectFit'
          />
        </View>
        <View className='qr-block footer'>
          <Text className='footer_txt'>
            有任何问题可添加<br />
            您的专属顾问进行咨询
          </Text>
        </View>
      </View>
    )
  }
}

export default CustomerQRjustShow as ComponentClass<PageOwnProps, PageState>;
